<script setup>
const props = defineProps(["value"]);
const v = props.value;
const tags = v.tags.split(",");
const level = {};
switch(v.level){
  case 1:
    level.title = "不急";
    level.color = "#fbb";
    break;
  case 2:
    level.title = "一般";
    level.color = "#f55";
    break;
  case 3:
    level.title = "紧急";
    level.color = "#f00";
    break;
}

const easy = {};
switch(v.easy){
  case 1:
    easy.title = "简单";
    easy.color = "#bbf";
    break;
  case 2:
    easy.title = "中等";
    easy.color = "#55f";
    break;
  case 3:
    easy.title = "困难";
    easy.color = "#00f";
    break;
}

const time = new Date(v.created_at-0).toLocaleDateString();
</script>

<template>
  <div class="question_item">
    <header>
      <div class="userBox">
        <img class="avatar" :src="v.avatar" alt="">
        <div class="message">
          <h5 class="uname">{{ v.nickname }}</h5>
          <span class="count">总<i>{{ v.hot }}</i>采纳 · 总<i>{{ v.answer }}</i>回答</span>
        </div>
      </div>
      <div class="tags">
        <span class="tag" v-for="item in tags" :key="item">{{item}}</span>
      </div>
    </header>
    <main>
      <h4>
        <span class="tag" :style="{background:level.color}">{{ level.title }}</span>
        <span class="tag" :style="{background:easy.color}">{{easy.title}}</span>
        <b>{{ v.title }}</b>
      </h4>
      <van-text-ellipsis class="content"
        rows="2"
        :content="v.content"
      />
      <div class="info">
        <div class="good">
          <span>👍</span><em>40</em>
        </div>
        <div class="count">
          <span> <i>66</i> 浏览</span>
          <span> <i>3</i> 消息</span>
          <span>发布于 <i>{{ time }}</i> </span>
        </div>
      </div>
    </main>
  </div>
</template>

<style>
.question_item{
  padding: 5px;
  background: #fff;
  margin-bottom: 10px;
}
.question_item header{
  position: relative;
  display: flex;
  justify-content: space-between;
  height: 50px;
}
.question_item header .userBox{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.question_item header .userBox .avatar{
  width:40px;height:40px;
  margin-right: 4px;
}
.question_item header .userBox .message{
  font-size: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.question_item header .userBox .message h5{
  font-size: 14px;
  font-weight: normal;
}
.question_item header .userBox .message .count{
  color: #777;
}
.question_item header .tags{
  display: flex;
  align-items: center;
}
.question_item header .tags span{
  padding: 4px;
  margin: 0 2px;
  background: pink;
  font-size: 12px;
  border-radius: 4px;
}
.question_item header::after{
  content: "";
  position: absolute;
  left: 0;bottom:0;
  width: 100%;height: 1px;
  background: #ddd;
}

.question_item main h4{
  padding: 4px 0;
  display: flex;
  align-items: center;
  font-size: 20px;
}
.question_item main h4 b{
  font-weight: bold;
  flex: 1;
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.question_item main h4 span{
  font-size: 12px;
  padding: 6px;
  margin-right: 6px;
  background: #f0f;
  border-radius: 4px;
  font-weight: normal;
}
.question_item main .content{
  margin: 4px 0;
  color: #555;
}
.question_item main .info{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.question_item main .info .good em{
  color: #33f;
  margin-left: 4px;
}
.question_item main .info .count{
  color: #777;
}
.question_item main .info .count span{
  margin-left: 10px;
}
</style>